<template>
  <div class style="height: 100%;padding: 10px 20px;">
    <div :id="uniqueID" style="height: 100%;width: 100%;"></div>
  </div>
</template>
<script>
import echarts from "echarts";
import uuidv1 from "uuid/v1";

import defaultmixins from "@/mixins/bigScreen/defaultmixins";
import axios from "@/utils/requestzz";;

export default {
  components: {},
  name: "chartlinechartgonglv2",
  mixins: [defaultmixins],
  components: {},
  data() {
    return {
      uniqueID: "",
      myChart: "",
      options: "",
    };
  },
  computed: {
    ishistory: function () {
      return this.$store.state.daping.ishistorytime;
    },
    timerangarr: function () {
      return this.$store.state.daping.timepick;
    },
  },
  watch: {
    "$store.state.daping.manageHeatPlant": {
      handler: function (n, o) {
        this.loadData(n);
      },
    },
  },
  created() {
    this.uniqueID = uuidv1();
  },
  mounted() {
    var myChart = echarts.init(document.getElementById(this.uniqueID));
    //供热面积环状图

    var scale = this.$root.setting.scale;

    var color = "#F5F5F5";

    var option = {};

    myChart.setOption(option);
    window.addEventListener("resize", () => {
      myChart.resize();
    });
    this.myChart = myChart;
    this.options = option;
  },
  methods: {
    loadData(heatPlantData) {
      var scale = this.$root.setting.scale;
      var pidArr20 = heatPlantData["pidArr20"];
      var pidArr8 = heatPlantData["pidArr8"];
      var heatPlantInfoMap = heatPlantData["heatPlantInfoMap"];

      var g_his_stime = 1579104000000; //2020.01.16 13:01:00
      var g_his_etime = 1579190399999; //2020.01.16 13:06:00 13:05:00有一条数据

      var y = 1;

      var nowHour8 = new Date().getHours();
      var stime8 = "";
      var etime8 = new Date().valueOf();
      if (nowHour8 >= 8) {
        //【2019年11月15日】今天8点到现在
        stime8 = new Date().setHours(8, 0, 0, 0).valueOf();
      } else {
        //【2019年11月15日】昨天8点到现在
        stime8 =
          new Date().setHours(8, 0, 0, 0).valueOf() - 1 * 24 * 60 * 60 * 1000;
      }

      let g_query_time_type = "history";
      if (g_query_time_type === "history") {
        stime8 = g_his_stime;
        etime8 = g_his_etime;
      }
      var heatData8 = [];

      var basicData = heatPlantInfoMap.filter((item) => {
        if (item.pid == pidArr8[y]) {
          return true;
        }
      })[0];
      var markLineData = basicData.buyHeat ? basicData.buyHeat : null;
      var hsName = basicData.name ? basicData.name : null;

      // var basicData = heatPlantInfoMap.get(pidArr20[x]);
      // console.log(markLineData, hsName)

      let options = {
        queries: [
          {
            // "metric": "pid,name,m_003qc",
            metric: "pid,m_003qc",
            schema: "monitor",
          },
        ],
        table: "heatPlant",
        orderBy: "aligntime",
        // "downsample":"1h-avg",
        search: "pid=" + pidArr8[y],
      };

      if (this.ishistory == "历史") {
        options = {
          queries: [
            {
              // "metric": "pid,name,m_003qc",
              metric: "pid,m_003qc",
              schema: "monitor",
            },
          ],
          table: "heatPlant",
          type: "history",
          orderBy: "aligntime",
          // "downsample":"1h-avg",
          startTime: this.timerangarr[0].getTime(),
          endTime: this.timerangarr[1].getTime(),
          search: "pid=" + pidArr8[y],
        };
      }

      axios.post("/open/queryDb", options).then((res) => {
        heatData8 = res.data["200"];

        var xData = [],
          yData = [],
          seriesData = [];
        for (var i in heatData8) {
          // xData.push(heatData8[i]["aligntime"].split(" ")[1]);
          // xData.push(heatData8[i]["aligntime"]);
          // yData.push(Number(heatData8[i]["m_003qc"] / 3.6).toFixed(2));
          if (heatData8[i]["m_003qc"] || heatData8[i]["m_003qc"] == 0) {
            seriesData.push([
              heatData8[i]["aligntime"],
              Number(heatData8[i]["m_003qc"] / 3.6).toFixed(0),
            ]);
          }
          // seriesData.push(heatData8[i]["aligntime"].split(" ")[1], Number(heatData8[i]["m_003qc"] / 3.6).toFixed(2))
        }

        // var markLineData = getHeatPlantManage(pidArr8[y]);
        // console.log(pidArr8[y], "marklineData", markLineData)

        var zdrqOption = {
          title: {
            text: hsName + "(MW)",
            textStyle: {
              color: "#fff",
              fontSize: 36 * scale,
              fontWeight: "bold",
            },
          },
          tooltip: {
            show: true,
            trigger: "axis",
            textStyle: {
              fontWeight: "normal",
              fontSize: 30 * scale,
            },
          },
          grid: {
            //统计图距离边缘的距离
            bottom: "0%",
            top: "20%",
            left: "5%",
            right: "5%",
            containLabel: true,
          },
          xAxis: [
            {
              //x轴
              type: "time", //【2019年11月20日】坐标轴类型改为time
              // boundaryGap: false,//坐标轴两边是否留白
              minInterval: 3600 * 1 * 1000, //【2019年11月20日】增加最小分割间距为1h
              axisLine: {
                //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                  color: "#F5F5F5", //x轴颜色
                },
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: "#F5F5F5",
                  fontSize: 30 * scale,
                },
                formatter: function (value, index) {
                  //【2019年11月20日】坐标轴类型改为time 增加最小分割间距为1h 格式化成分:秒 补齐0 只在0点刻度显示日期和时间
                  var date = new Date(value);
                  var hour = date.getHours();
                  var minute = date.getMinutes();

                  hour = hour < 10 ? "0" + hour : hour;
                  minute = minute < 10 ? "0" + minute : minute;

                  if (hour == "00" && minute == "00") {
                    return (
                      date.getMonth() +
                      1 +
                      "-" +
                      date.getDate() +
                      " " +
                      hour +
                      ":" +
                      minute
                    );
                  }
                  return hour + ":" + minute;
                },
              },
              axisTick: {
                show: false,
              }, //刻度点数轴
              splitLine: {
                show: false,
              }, //是否显示分隔线。默认数值轴显示，类目轴不显示。
              // data: xData,//只有category类型才需要设置data
            },
          ],
          yAxis: [
            {
              //y轴的相关设置
              type: "value", //y轴数据类型为连续的数据
              // name:"单位:MW",
              splitLine: {
                //y轴上的y轴线条相关设置
                show: false,
                //  lineStyle: {
                // 	 color: '#233e64'
                //  }
              },
              axisLabel: {
                //坐标轴刻度标签的相关设置
                textStyle: {
                  color: "#F5F5F5",
                  fontSize: 30 * scale,
                },
              },
              axisLine: {
                //y轴的相关设置
                show: true,
                lineStyle: {
                  color: "#F5F5F5", //y轴颜色
                },
              },
              axisTick: {
                show: false,
              }, //刻度点数轴
              // max:'dataMax',
            },
          ],
          series: [
            {
              name: "热量",
              type: "line", //统计图类型为折线图
              smooth: true, //是否平滑曲线显示
              symbolSize: 0, //数据点的大小，[0,0]//b表示宽度和高度
              lineStyle: {
                //线条的相关设置
                normal: {
                  color: "#329FE4", // 线条颜色
                },
              },
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  color: "#329FE4", //tooltip里点的颜色
                },
              },
              areaStyle: {
                //区域填充样式
                normal: {
                  //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(50,159,228,0.8)",
                      },
                      {
                        offset: 1,
                        color: "rgba(147,217,251,0.06)",
                      },
                    ],
                    false
                  ),

                  shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
                  shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                },
              },
              markLine: {},
              // data: yData,
              data: seriesData,
            },
          ],
        };

        if (markLineData != null) {
          zdrqOption.series[0].markLine = {
            symbol: "none", //去掉警戒线最后面的箭头
            label: {
              fontSize: 20 * scale,
              position: "middle", //将警示值放在哪个位置，三个值“start”,"middle","end"  开始  中点 结束
              // formatter: '{b}: {d}',
            },
            data: [
              {
                name: "买热量",
                silent: false, //鼠标悬停事件  true没有，false有
                lineStyle: {
                  //警戒线的样式  ，虚实  颜色
                  type: "solid",
                  color: "#00F7AD",
                  width: 5,
                },
                yAxis: markLineData,
              },
            ],
          };
          zdrqOption.yAxis[0].max = Number(markLineData * 1.2).toFixed(0);

          zdrqOption.tooltip.formatter = (params, ticket, callback) => {
            //【2019年11月21日】把markline的数据也放上去 显示差值
            var html =
              params[0].axisValueLabel +
              "<br>" +
              params[0].marker +
              params[0].seriesName +
              " : " +
              params[0].value[1];
            if (markLineData) {
              html +=
                "<br>" +
                params[0].marker +
                "买热量 : " +
                markLineData +
                "<br>" +
                params[0].marker +
                "差值:" +
                (params[0].value[1] - markLineData).toFixed(0);
            }
            return html;
          };
        }
        this.myChart.setOption(zdrqOption);

        y++;
        if (y == pidArr8.length) {
          //如果到末尾了 则重头开始
          y = 0;
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
</style>